{extend name="panel/layout" /}
{block name="main"}
<div class="row">
    <div class="modal inmodal fade" id="myModa4" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" onclick="clearInterval(interval1)"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">订单信息</h4>
                </div>
                <div class="modal-body" id="showInfo2">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal" onclick="clearInterval(interval1)">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    {if condition="config('zz_alipay_api') or config('zz_tenpay_api') or config('zz_wxpay_api') or config('zz_qqpay_api')"}
    <div class="col-md-6">
        <div class="panel">
            <div class="panel-heading">在线充值
            <span class="pull-right">
                    <label class="label label-success pull-right">
                        剩余金币：{$userInfo.point}
                    </label>
                </span></div>
            <div class="panel-body">
                <form action="#" class="form-horizontal">
                    <input type="hidden" name="uid" value="{$userInfo.uid}">
                    <input type="hidden" name="type" value="alipay">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">金币:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" value="{$userInfo.point}金币" disabled>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">充值:</label>
                        <div class="col-sm-10">
                            <input type="text" name="value" placeholder="输入要充值的余额" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">方式</label>
                        <div class="col-sm-10">
                            {if condition="config('zz_alipay_api')"}<label><input type="radio" name="paytype"
                                                                                  value="alipay" checked>支付宝</label>{/if}{if
                            condition="config('zz_tenpay_api')"}<label><input type="radio" name="paytype"
                                                                              value="tenpay">财付通</label>{/if}{if
                            condition="config('zz_qqpay_api')"}<label><input type="radio" name="paytype" value="qqpay">QQ钱包</label>{/if}{if
                            condition="config('zz_wxpay_api')"}<label><input type="radio" name="paytype" value="wxpay">微信支付</label>{/if}
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <a class="btn btn-success" id="buyshop">&lt;&lt;&lt;充值&gt;&gt;&gt;</a>
                            <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModa4"
                               id="alink" style="visibility: hidden;"></a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {/if}
    <div class="col-md-6">
        <div class="panel">
            <div class="panel-heading">充值卡充值<span class="pull-right">
                    <label class="label label-success pull-right">
                        剩余金币：{$userInfo.point}
                    </label>
                </span></div>
            <div class="panel-body">
                <form method="post" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">金币:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" value="{$userInfo.point}金币" disabled>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">卡密:</label>
                        <div class="col-sm-10">
                            <input type="text" name="km" placeholder="输入充值卡卡密" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button class="btn btn-success" type="submit">&lt;&lt;&lt;充值&gt;&gt;&gt;</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/assets/js/layer/layer.min.js"></script>
<script src="/assets/js/qrcode.min.js"></script>
<script>
    function getcodeurl(codeurl) {
        var qrcode = new QRCode("qrcode", {
            text: codeurl,
            width: 240,
            height: 240,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    }
    var interval1;
    function loadmsg(trade_no) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{:url('ajax/getshop')}",
            timeout: 10000,
            data: {trade_no: trade_no},
            success: function (data, textStatus) {
                if (data.code == 2) {
                    clearInterval(interval1);
                    if (confirm("您已支付完成，需要跳转到用户中心吗？")) {
                        window.location.href = "{:url('recharge')}";
                    } else {
                    }
                } else if (data.code == -1) {
                    layer.alert(data.msg);
                    clearInterval(interval1);
                } else if (data.code == 1) {
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == "timeout") {
                    //loadmsg();
                } else {
                    alert('创建连接失败');
                }
            }
        });
    }
    $(document).ready(function () {
        $("#buyshop").click(function () {
            var value = $("input[name='value']").val();
            var paytype = $("input:radio[name='paytype']:checked").val();
            if (value == '' || value == 0) {
                layer.alert("请填写充值金额");
                return false;
            }
            layer.load(0, 2);
            ajax.get("/index.php/index/ajax/recharge.html?type=" + paytype + "&value=" + value, "json", function (d) {
                if (d.code != 1) {
                    setTimeout(function () {
                        layer.closeAll('loading');
                    }, 1);
                    layer.alert(d.msg);
                    return false;
                }
                tishi_2(paytype, d);
            });
        });
    });
    function tishi_2(paytype, d) {
        if (d.epay == 1) {
            var data = '<p>订单号：' + d.trade_no + '</p><p>订单金额：<b>' + d.money + '</b>元</p><p>订单名称：' + d.name + '</p>' +
                    '<p><b>付款后系统会自动为您充值到账，即时生效，无需卡密。</b></p>' +
                    '<a href="/other/submit.php?type=epay&type2=' + paytype + '&orderid=' + d.trade_no + '" class="btn btn-success btn-block" target="_blank">立即支付</a>' +
                    '</form>';
        } else if (paytype == 'alipay') {
            var data = '<p>订单号：' + d.trade_no + '</p><p>订单金额：<b>' + d.money + '</b>元</p><p>订单名称：' + d.name + '</p>' +
                    '<p><b>支付宝付款后系统会自动为您充值到账，即时生效，无需卡密。</b></p>' +
                    '<a href="/other/submit.php?type=alipay&orderid=' + d.trade_no + '" class="btn btn-success btn-block" target="_blank">立即支付</a>' +
                    '</form>';
        } else if (paytype == 'tenpay') {
            var data = '<p>订单号：' + d.trade_no + '</p><p>订单金额：<b>' + d.money + '</b>元</p><p>订单名称：' + d.name + '</p>' +
                    '<p><b>财付通付款后系统会自动为您充值到账，即时生效，无需卡密。</b></p>' +
                    '<a href="/other/submit.php?type=tenpay&orderid=' + d.trade_no + '" class="btn btn-success btn-block" target="_blank">立即支付</a>' +
                    '</form>';
        } else if (paytype == 'wxpay') {
            var data = '<p style="text-align: center;"><b>￥' + d.money + '</b></p>' +
                    '<div style="text-align: center;" id="qrcode"></div>' +
                    '<p><br></p>' +
                    '<p style="text-align: center;">请使用微信扫一扫，扫描上方二维码完成支付。' +
                    '<p style="text-align: center;">手机用户可保存上方二维码到手机中，在微信扫一扫中选择“相册”即可</p>' +
                    '<p style="text-align: center;"><b>扫码付款后系统会自动为您充值，即时生效，无需卡密。</b></p>';
        } else if (paytype == 'qqpay') {
            var data = '<p style="text-align: center;"><b>￥' + d.money + '</b></p>' +
                    '<div style="text-align: center;" id="qrcode"></div>' +
                    '<p><br></p>' +
                    '<p style="text-align: center;">请使用手机QQ扫一扫，扫描上方二维码完成支付。' +
                    '<p style="text-align: center;">手机用户可保存上方二维码到手机中，在手机QQ扫一扫中选择“相册”即可</p>' +
                    '<p style="text-align: center;"><b>扫码付款后系统会自动为您充值，即时生效，无需卡密。</b></p>';
        }
        interval1 = setInterval("loadmsg('" + d.trade_no + "')", 3000);
        var divshow = $("#showInfo2");
        divshow.text("");
        divshow.append(data);
        setTimeout(function () {
            layer.closeAll('loading');
        }, 1);
        $("#alink").click();
        if (paytype == 'wxpay' || paytype == 'qqpay') {
            getcodeurl(d.code_url);
        }
    }
    var ajax = {
        get: function (url, dataType, callback) {
            dataType = dataType || 'html';
            $.ajax({
                type: "GET",
                url: url,
                async: true,
                dataType: dataType,
                cache: false,
                beforeSend: function () {
                    $(".colorful_loading_frame,.colorful_loading").css("display", "block");
                },
                complete: function () {
                    $(".colorful_loading_frame,.colorful_loading").css("display", "none");
                },
                success: function (data, status) {
                    if (callback == null) {
                        return;
                    }
                    callback(data);
                },
                error: function (error) {
                    alert('创建连接失败');
                }
            });
        },
        post: function (url, parameter, dataType, callback) {
            dataType = dataType || 'html';
            $.ajax({
                type: "POST",
                url: url,
                async: true,
                dataType: dataType,
                data: parameter,
                cache: false,
                beforeSend: function () {
                    $(".colorful_loading_frame,.colorful_loading").css("display", "block");
                },
                complete: function () {
                    $(".colorful_loading_frame,.colorful_loading").css("display", "none");
                },
                success: function (data, status) {
                    if (callback == null) {
                        return;
                    }
                    callback(data);
                },
                error: function (error) {
                    alert('创建连接失败');
                }
            });
        }
    }

</script>

{/block}